<template>
  <section class="product-grid">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800">{{ title }}</h2>
      <a href="#" class="text-sm text-gray-500 hover:text-purple-600 transition-colors">查看更多 &gt;</a>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <div 
        v-for="product in products" 
        :key="product.id"
        class="product-item group relative overflow-hidden rounded-xl bg-white shadow-lg transition-all duration-300 hover:shadow-xl"
      >
        <div class="aspect-w-16 aspect-h-9 overflow-hidden">
          <img 
            :src="getImageSrc(product.mainPic)" 
            :alt="product.title"
            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
            @error="handleImgError"
          />
        </div>
        <div class="p-4">
          <div class="flex items-start justify-between mb-2">
            <h3 class="text-lg font-semibold text-gray-800 flex-1">{{ product.title }}</h3>
            <span class="text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-600">
              {{ product.typeName }}
            </span>
          </div>
          
          <div class="space-y-2 mb-3">
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <i class="i-carbon-building"></i>
              <span>{{ product.manufacturer }}</span>
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <i class="i-carbon-document"></i>
              <span>{{ product.approvalNo }}</span>
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <i class="i-carbon-box"></i>
              <span>{{ product.goodsSpec }}</span>
            </div>
            <div class="flex items-center gap-2 text-sm text-gray-600">
              <i class="i-carbon-pills"></i>
              <span>{{ product.formula }}</span>
            </div>
          </div>

          <div class="flex items-center justify-between border-t border-gray-100 pt-3">
            <div class="flex items-center gap-2">
              <span class="text-xl font-bold text-purple-600">{{ formatPriceAuth(product.price, !!userStore.token) }}</span>
            </div>
            <div class="flex items-center gap-1 text-sm text-gray-500">
              <i class="i-carbon-shopping-cart"></i>
              <span>{{ product.sold || 0 }}</span>
            </div>
          </div>

          <div class="mt-3 flex items-center gap-2 text-xs text-gray-500">
            <span v-if="product.wholLimtNum > 0" class="px-2 py-1 rounded-full bg-yellow-100 text-yellow-600">限购{{ product.wholLimtNum }}件</span>
            <span v-if="product.storNum" class="px-2 py-1 rounded-full bg-green-100" :class="getStockStatusClass(product.storNum)">库存{{ getStockStatusText(product.storNum) }}</span>
          </div>
        </div>

        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <div class="absolute bottom-4 left-4 right-4 space-y-2">
            <template v-if="!showQuantityInput">
      
              <button 
                @click="viewProductDetail(product.id)" 
                class="w-full py-2 bg-white/90 text-purple-600 rounded-lg transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300"
              >
                查看详情
              </button>
            </template>
            <template v-else>
              <div class="w-full flex items-center gap-2 bg-white/90 p-3 rounded-lg transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
                <button 
                  @click="decreaseQuantity" 
                  class="w-12 h-10 flex items-center justify-center bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
                >
                  <el-icon><Minus /></el-icon>
                </button>
                <input 
                  type="number" 
                  v-model="quantity" 
                  min="1" 
                  :max="product.wholLimtNum || product.storNum"
                  class="flex-1 h-10 text-lg text-center bg-white border-2 border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                />
                <button 
                  @click="increaseQuantity" 
                  class="w-12 h-10 flex items-center justify-center bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
                >
                  <el-icon><Plus /></el-icon>
                </button>
              </div>
              <div class="flex gap-2">
                <button 
                  @click="addToCart" 
                  class="flex-1 py-3 bg-purple-600 text-white rounded-lg transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 text-lg"
                >
                  加入购物车
                </button>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Minus, Plus } from '@element-plus/icons-vue'
import type { DisplayGoods } from '@/views/HomeView.vue'
import { useUserStore } from '@/stores/user'
import { handleImageError as handleImgError, getImageSrc } from '@/lib/imageUtils'
import { formatPriceAuth } from '@/lib/utils'
import { getStockStatusText, getStockStatusClass } from '@/lib/stockUtils'

const props = defineProps<{
  title: string
  products: DisplayGoods[]
}>()

const showQuantityInput = ref(false)
const quantity = ref(1)
const userStore = useUserStore()
const router = useRouter()

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

const increaseQuantity = () => {
  const maxQuantity = props.products[0]?.wholLimtNum || parseInt(props.products[0]?.storNum || '0')
  if (quantity.value < maxQuantity) {
    quantity.value++
  }
}

const addToCart = () => {
  // TODO: Implement add to cart logic
  console.log('Adding to cart:', quantity.value)
  showQuantityInput.value = false
}



const viewProductDetail = (productId: number) => {
  router.push({ name: 'product', params: { id: productId.toString() } })
}


</script>

<style scoped>
.product-item {
  @apply transform transition-all duration-300;
}

.product-item:hover {
  @apply -translate-y-1;
}

:deep(.aspect-w-16) {
  position: relative;
  padding-bottom: 56.25%;
}

:deep(.aspect-w-16 > *) {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style> 